import React, { useState } from 'react'
import './index.scss'
type formType = {
    date: string
    name: string
    age: number
}
function Page() {
    const [formData, setFormData] = useState<formType>({
        date: '',
        name: '',
        age: 0,
    })
    // 处理发送事件
    const handleSend: React.FormEventHandler<HTMLFormElement> = (e) => {
        e.preventDefault()
        console.log(e)
    }
    const clearForm = () => {
        setFormData({
            date: '',
            name: '',
            age: 0,
        })
    }
    return (
        <div className='form-page'>
            <form onSubmit={handleSend}>
                <label className='form-item'>
                    <span className='form-label'>日期:</span>
                    <input
                        type='date'
                        value={formData.date}
                        className='form-input'
                        onInput={(e: React.FormEvent<HTMLInputElement>) => {
                            setFormData({
                                ...formData,
                                date: (e.target as HTMLInputElement).value,
                            })
                        }}
                    />
                </label>
                <label className='form-item'>
                    <span className='form-label'>姓名:</span>
                    <input
                        type='text'
                        value={formData.name}
                        className='form-input'
                        onInput={(e) => {
                            setFormData({
                                ...formData,
                                name: (e.target as HTMLInputElement).value,
                            })
                        }}
                    />
                </label>
                <label className='form-item'>
                    <span className='form-label'>年龄:</span>
                    <input
                        type='number'
                        value={formData.age}
                        className='form-input'
                        onInput={(e) => {
                            setFormData({
                                ...formData,
                                age:
                                    parseInt(
                                        (e.target as HTMLInputElement).value
                                    ) || 0,
                            })
                        }}
                    />
                </label>
                <div className='form-footer'>
                    <button type='submit'>提交</button>
                    <button onClick={clearForm}>清空</button>
                </div>
            </form>
        </div>
    )
}

export default Page
